<template>
  <div class="mt-8" v-loading="loading">
    <el-card>
      <template #header>
        <div class="card-header flex justify-between items-center">
          <el-button size="small" type="primary" @click="openClick">新增</el-button>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="刷新"
          >
            <el-icon size="20" class="icon" @click="getData"><Refresh /></el-icon>
          </el-tooltip>
        </div>
      </template>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="title" label="公告标题" width="380px" />
        <el-table-column prop="create_time" label="发布时间" width="180px" />
        <el-table-column width="180px" align="center">
          <template #default="scope">
            <el-button size="small" type="text" @click="handleEdit(scope?.row)">修改</el-button>
            <el-popconfirm
              title="确认删除该公告吗？"
              confirm-button-text="确认"
              cancel-button-text="取消"
              @confirm="handleDelete(scope?.row?.id)"
            >
              <template #reference>
                <el-button size="small" type="text">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div class="flex justify-center items-center bg-light-100">
      <el-pagination
        background
        layout="prev,pager,next"
        :total="total"
        :current-page="currentPage"
        :page-size="limit"
        @current-change="getData"
      />
    </div>
    <!-- 新增公告弹框 -->
    <Formdrawer :title="drawerTitle" ref="drawerRef" @onSubmit="onSubmit">
      <el-form ref="formRef" :model="form" label-width="auto" :rules="relus"> 
          <el-form-item label="公告标题" prop="title">
            <el-input v-model="form.title" :autofocus="true" placeholder="请输入标题" />
          </el-form-item>
          <el-form-item label="公告内容" prop="content">
           <el-input v-model="form.content" :autofocus="true" type='textarea' :rows="5" placeholder="请输入内容" />
          </el-form-item>
      </el-form>
    </Formdrawer>
  </div>
</template>

<script setup>
import { computed, reactive, ref } from "vue";
import { getNoticelist,deleteNotice,changeNotice } from "@/api/notice";
import Formdrawer from "@/components/Formdrawer.vue";
import { addNotice } from "@/api/notice";
import { notify } from "@/composible/notify";
//分页
const currentPage = ref(1);
const total = ref(1);
const limit = ref(10);
const loading = ref(false);

const tableData = ref([]);
function getData() {
  loading.value = true;
  getNoticelist()
    .then((res) => {
      tableData.value = res.list;
      total.value = res.totalCount;
    })
    .finally(() => {
      loading.value = false;
    });
}
getData();

//删除公告方法
function handleDelete(id) {
  loading.value = true;
  deleteNotice(id).then(res => {
    notify("sucess", "删除成功");
    getData();
  }).finally(() => {
    loading.value = false;
  })
}

//重置form表单内容和标题
const formRef = ref(null);
function resetForm(row = null)
{
  if (formRef.value) formRef.value.clearValidate();
  if (row)
  {
    for (const key in form)
    {
      form[key] = row[key];    
    }
  }
}
//修改公告方法：修改公告和新增公告共用一个drawer
const editId = ref(0);
const drawerTitle = computed(() => {
  return editId.value? "修改" : "新增";
});
function handleEdit(row)
{
  editId.value = row?.id;
  drawerRef.value.open();
  resetForm(row);
}

//新增公告
const drawerRef = ref(null);
const form = reactive({
  title: "",
  content:""
})
//新增打开弹框
function openClick()
{
  editId.value = 0;
  form.title = "";
  form.content = "";
  drawerRef.value.open();
}

//确认方法
const onSubmit = () => {
  drawerRef.value.showLoading();
  const fun = editId.value ? changeNotice(editId.value, form) : addNotice(form);
  fun.then(res => {
    notify("success", drawerTitle.value+"成功");
    getData();
    drawerRef.value.close();
  }).finally(() => {
    drawerRef.value.closeLoading();
  })
}

//验证规则
const relus = {
  title: [{required: true, message: '请输入标题', trigger: 'blur'}],
  content:[{required: true, message: '请输入内容', trigger: 'blur'}]
}

</script>

<style lang="less" scoped>
.icon {
  color: rgba(0, 187, 255, 0.619);
}
</style>